<template>
  <view class="tablePage">
    <view class="add flex" v-if="showAddIcon" @click="addRowList">
      <u-icon name="plus" size="20px" />新增
    </view>
    <table
      @row-click="handleRowClick"
      border="1"
      width="100%"
      height="100%"
      cellspacing="0"
    >
      <thead>
        <th v-for="column in columns" :key="column.key">
          {{ column.label }}
        </th>
      </thead>

      <tbody>
        <!-- @click="handleRowClick(row)" -->
        <tr v-for="row in dataList" :key="row.id">
          <td v-for="column in columns" :key="column.key">
            <view class="inputClass" v-if="column.valueType == 'input'">
              <input
                v-model="row[column.key]"
                placeholder-class="input-placeholder"
              />
            </view>
            <view
              v-else-if="column.valueType == 'select'"
            >
              <select name="select" v-model="row[column.key]">
                <option
                  v-for="optIt in column.options"
                  :key="optIt.id"
                  :value="optIt.id"
                >
                  {{ optIt.label }}
                </option>
              </select>
            </view>
            <view v-else>
              {{ row[column.key] }}
            </view>
          </td>
        </tr>
      </tbody>
    </table>
  </view>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    dataList: {
      type: Array,
      default: () => [],
    },

    showAddIcon: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      sort: null,
      sortedData: [],
    };
  },
  onMounted() {},
  computed: {},
  methods: {
    handleRowClick(row) {
      this.$emit("handleRowClick", row);
    },
    addRowList() {
      this.$emit("addRowList", "");
    },
  },
};
</script>

<style lang="scss" scoped>
.tablePage {
  table {
    border-collapse: collapse;
    thead {
      background-color: #f1f1f1;
      font-size: 14px;
    }

    tbody {
      td {
        font-size: smaller;
        text-align: center;
        .inputClass{
          input{
          width:100%;
          font-size: 12px;
        }
        }
       
      }

    }
  }
  .add {
    padding: 10px 0px;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
</style>
